<template>
	<view class="container">
		<view class="store-info">
			<view class="header">
				<image class="image" :src="userInfo.avatarUrl || '/static/default-logo.png'"></image>
			</view>
		</view>
		<view class="auth-title">申请获取以下权限</view>
		<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
		<view class="login-btn">
			<button class="button" @click="getUserProfile"> 获取头像昵称 </button>
			<!-- <view class="button" @click="handleLogin()">一键登录</view> -->
		</view>
		<view class="no-login-btn">
			<view class="button" @click="handleCancel()">暂不登录</view>
		</view>
	</view>
</template>

<script>
	import {
		loginByWeichat,
		register
	} from '@/api/user'
	export default {
		components: {

		},

		data() {
			return {
				registerData: {
					unionId: '',
					openId: '',
					sessionKey: '',
					signature: '',
					rawData: '',
					encryptedData: '',
					iv: ''
				},
				userInfo: {
					avatarUrl: '',
					nickName: ''
				}
			}
		},
		methods: {
			getUserProfile(e) {
				wx.showLoading({
					title: '加载中',
				})
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				wx.getUserProfile({
					desc: '获取用户信息',
					success: (user) => {
						wx.login({
							success: (e) => {
								// 一键登录接口 由后端提供
								loginByWeichat({
									code: e.code
								}).then(res => {
									if (res.code == '60003') {
										// 当前用户未注册
										this.registerData = {
											unionId: res.data.unionId || res.data
												.openId,
											openId: res.data.openId,
											sessionKey: res.data.sessionKey,
											signature: user.signature,
											rawData: user.rawData,
											encryptedData: user.encryptedData,
											iv: user.iv
										}
										this.register()
									} else if (res.code == '200') {
										// 缓存token
										wx.setStorageSync('token', res.data.token)
										// 当前用户已注册
										this.isMobile(res.data)
									}
								}).catch(err => {
									console.log('err', err)
								})
							}
						})
					}
				})
			},
			// 用户注册
			register() {
				register(this.registerData).then(res => {
			
				})
			},
			// 绑定手机号
			isMobile(data) {
				// 用户未绑定手机号
				if (!data.mobile) {
					this.showMobile()
				} else {
					wx.setStorageSync('userInfo', JSON.stringify({
						userName: data.userName,
						mobile: data.mobile,
						avatar: data.avatar
					}))
					this.$navTo('pages/user/index')
				}
			},
			showMobile() {
				wx.showModal({
					title: '提示',
					content: '根据国家相关规定，需要绑定手机号！',
					confirmText: '去绑定',
					success: (e) => {
						if (e.confirm) {
							this.$navTo('pages/user/bindMobile')
						} else {
							wx.removeStorageSync('token')
						}
						console.log(e)
					}
				})
			},
			/**
			 * 暂不登录
			 */
			handleCancel() {
				// 跳转回原页面
				this.onNavigateBack()
			},
			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
				} else {
					this.$navTo('pages/index/index')
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 60rpx;
		font-size: 32rpx;
		background: #fff;
		min-height: 100vh;
	}

	.store-info {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 72rpx;
		text-align: center;

		.header {
			width: 190rpx;
			height: 190rpx;
			border: 4rpx solid #fff;
			margin: 0 auto 0;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);

			.image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		margin-bottom: 20rpx;

		.button {
			width: 100%;
			height: 86rpx;
			background: linear-gradient(to right, #fa2209, #ff6335);
			color: #fff;
			font-size: 30rpx;
			border-radius: 80rpx;
			letter-spacing: 5rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			// 禁用按钮
			&.disabled {
				opacity: 0.6;
			}
		}

	}

	.no-login-btn {

		.button {
			height: 86rpx;
			background: #dfdfdf;
			color: #fff;
			font-size: 30rpx;
			border-radius: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
